<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addXRayControl" />
    <title>HERE Maps API Example: X-Ray</title>
    
     <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
    <!-- Bootstrap jQuery Library -->
    <script type="text/javascript" src="../libs/jQl.min.js"></script>     
    <!-- Asynchronously the HERE Maps API for JavaScript -->
    <script type="text/javascript" src="../libs/hereAsyncLoader.js" 
      id="HereMapsLoaderScript" 
      data-map-container="mapContainer" 
      data-params="all" 
      data-callback="addXRayControl" 
      data-libs="x-ray"
      data-parent="demos/x-ray-component/">
    </script>
    <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
  </head>
  <body>
    <h1>Using Map Observers: X-Ray Vision</h1>
    <p>This example adds a custom map component, which displays 
      a mini-map showing the satellite view of the current location.</p>
    
    <div id="mapContainer" style="width:540px; height:334px;" ></div>
    
    <div id="src">
      <br/>
      <p> The control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/x-ray.js">libs/x-ray.js</a>"&gt;&lt;/script></code></pre>
    </p>
    <p>Code:</p></div>
<script id="example-code" data-categories="map,library" type="text/javascript">
//<![CDATA[
function addXRayControl(map) {
  map.components.add(new XRayControl(200, 200));
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
  </body>
</html>
